<template>
	<view class="setphone">
		<u-navbar
			back-text="换绑手机号"
			:background="{
				background: 'transparent'
			}"
		></u-navbar>
		<view class="card">
			<view class="">
				<view class="">原手机号：</view>
				<view class="u-flex u-row-left u-col-center">
					<text class="iconfont icon-phone" style="font-size: 50rpx;color: #919191;"></text>
					<u-field v-model="old_phone" :label-width="0" placeholder="请输入手机号"></u-field>
				</view>
			</view>
			<view class="" style="margin-top: 42rpx;">
				<view class="">新手机号码：</view>
				<view class="u-flex u-row-left u-col-center">
					<text class="iconfont icon-phone" style="font-size: 50rpx;color: #919191;"></text>
					<u-field v-model="new_phone" :label-width="0" placeholder="请输入手机号"></u-field>
				</view>
			</view>
			<view class="" style="margin-top: 42rpx;">
				<view class="">验证码：</view>
				<view class="u-flex u-row-left u-col-center">
					<text class="iconfont icon-dun" style="font-size: 50rpx;color: #919191;"></text>
					<u-field v-model="code" :label-width="0" placeholder="请输入验证码">
						<text slot="right" @click="getCode" style="color: #F2682C;font-size: 28rpx;">{{ codeTips }}</text>
					</u-field>
				</view>
			</view>
		</view>
		<u-button
			shape="circle"
			:ripple="true"
			:hair-line="false"
			ripple-bg-color="rgba(255,255,255,0.3)"
			:custom-style="{
				backgroundColor: '#F2682C',
				color: '#FFFFFF',
				fontWeight: 600,
				boxShadow: '0px 0px 12rpx 0px rgba(242, 104, 44, 100)',
				margin: '0 20rpx'
			}"
			@click="doUpdatePhone"
		>
			<text class="bold" style="font-size: 36rpx;">提 交</text>
		</u-button>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'setphone',
	data() {
		return {
			old_phone: '',
			new_phone: '',
			code: '',
			codeTips: ''
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		doUpdatePhone() {
			this.$u.api
				.doUpdatePhone({
					old_phone: this.old_phone,
					new_phone: this.new_phone,
					code: this.code
				})
				.then(res => {
					let info = uni.getStorageSync('jxuser');
					info.phone = this.new_phone;
					uni.setStorageSync('jxuser', info);
					this.$refs.uToast.show({
						title: '换绑成功!',
						type: 'success'
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		codeChange(text) {
			this.codeTips = text;
		},
		getCode() {
			if (this.$u.test.mobile(this.new_phone)) {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					});
					this.$u.api
						.getPhoneCode({
							phone: this.new_phone
						})
						.then(res => {
							// console.log(res);
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
						.catch(err => {
							console.log(err);
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error'
							});
						});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			} else {
				this.$u.toast('请检查手机号填写是否正确!');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.setphone {
	.card {
		background-color: #ffffff;
		padding: 28rpx 40rpx 36rpx 56rpx;
		margin: 10rpx 20rpx 44rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.09);
		border-radius: 12rpx;
		overflow: hidden;
	}
}
</style>
